<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
"Linear clock" by Stephane Tsacas
stephane.tsacas+eleeno@gmail.com
Description : ASCII + text decoration. top line are hours, bottom minutes, seconds are displayed in bold.
Some hacks done to differentiate 12 from 21 for example.
   If there is only one decoration, it means that the digit is doubled, as in 11:22 for example.
-->
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<title>Linear</title>
<script type="text/javascript"><!--
// Set to something for debugging.
var debug = 0;

// Wrapper to new Date() so you can set the time manually when debugging.
function currentTime()
{
  var timeNow;

  if (debug)
    {
      timeNow = new Date(2009, 4, 1, 11, 33, 12); // Set the time as you want (3 last args).
    }
  else
    {
      timeNow = new Date();
    }
  return timeNow;
}

var numbers;
var spanArray;
function cacheObjects()
{
  numbers = document.getElementById("clockDisplay");
  spanArray = new Array();

  for (var i = 0; i < numbers.getElementsByTagName('span').length; i++)
    {
      var oneSpan = numbers.getElementsByTagName('span')[i];
      spanArray.push(oneSpan);
    }
}

// Main function, does it all. Called every second.
function blinkSomething()
{
  var timeNow = currentTime();
  var hours = timeNow.getHours();
  var minutes = timeNow.getMinutes();
  var seconds = timeNow.getSeconds();

  with (Math)
  {
    var firstHourDigit = floor(hours / 10);
    var secondHourDigit = hours % 10;
    var firstMinuteDigit = floor(minutes / 10);
    var secondMinuteDigit = minutes % 10;
    var firstSecondDigit = floor(seconds / 10);
    var secondSecondDigit = seconds % 10;
  }

//  for (var i = 0; i < numbers.getElementsByTagName('span').length; i++)
  for (var i = 0; i < spanArray.length; i++)
    {
      var oneSpan = spanArray[i];
      var digit = oneSpan.innerHTML;

      oneSpan.setAttribute('style', '');

      if (digit == firstHourDigit)
	oneSpan.setAttribute('style', 'border-top:red double medium; ');

      if (digit == secondHourDigit)
	oneSpan.setAttribute('style', oneSpan.getAttribute('style') + 'border-top:red solid 1px; ');

      if (digit == firstMinuteDigit)
	  oneSpan.setAttribute('style', oneSpan.getAttribute('style') + 'border-bottom:green double medium; ');

      if (digit == secondMinuteDigit) 
	  oneSpan.setAttribute('style', oneSpan.getAttribute('style') + 'border-bottom:green solid 1px; ');

      if (digit == firstSecondDigit && digit != 0)
  	oneSpan.setAttribute('style', oneSpan.getAttribute('style') + 'font-weight:bold; ');

      if (digit == secondSecondDigit)
  	oneSpan.setAttribute('style', oneSpan.getAttribute('style') + 'font-weight:bold; ');
    }
}
//-->
</script>
  </head>

<body onload="cacheObjects(); setInterval('blinkSomething()', 1000)" >
  <div id="clockDisplay" style='font:14pt "Courier New" "Courier" "Monaco"'>
    <span style='' id="one">1</span>
    <span style='' id="two">2</span>
    <span style='' id="three">3</span>
    <span style='' id="four">4</span>
    <span style='' id="five">5</span>
    <span style='' id="six">6</span>
    <span style='' id="seven">7</span>
    <span style='' id="eight">8</span>
    <span style='' id="nine">9</span>
    <span style='' id="zero">0</span>
  </div>
</body>
</html>
